<template>
  <div class="home-wrapper">
    <div class="filters-wrapper">
      <div class="title total_title">
        员工管理
        <div class="fr">
          <el-button type="primary" @click="addmanage">添加</el-button>
        </div>
      </div>

      <el-dialog title="账户管理" :visible.sync="dialogFormVisible">
        <el-form :model="form">
           <el-form-item label="账户id" :label-width="formLabelWidth">
            <el-input v-model="form.account_id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="组id" :label-width="formLabelWidth">
            <el-input v-model="form.campaign_id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="Gid" :label-width="formLabelWidth">
            <el-input v-model="form.gid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="投放平台"
            prop="type"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="form.type"
              placeholder="请选择活动区域"
              style="width: 100%"
            >
              <el-option
                v-for="item in typelist"
                :key="item.index"
                :label="item.name"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          'text-align': 'center',
          background: '#f7f7f7',
          color: '#666',
        }"
      >
      <div slot="empty">
        <el-empty description="暂无数据" />
      </div>
        <el-table-column prop="code" label="账户id" width="200" align="center">
        </el-table-column>
        <el-table-column prop="name" label="组id" width="200" align="center">
        </el-table-column>
        <el-table-column prop="gid" label="Gid" width="200" align="center">
        </el-table-column>
        <el-table-column prop="project_user" label="负责人" width="200" align="center">
        </el-table-column>
        <el-table-column
        width="200"
        :formatter="statusFormatter"
          prop="type"
          label="投放平台"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
         <el-table-column label="人员分配" align="center">
          <template slot-scope="scope">
             <el-button @click="fenpei(scope.row)" type="primary">分配人员</el-button>
            <el-dialog
              title="分配人员"
              :visible.sync="dialogVisible"
              width="30%"
              center>
              <el-input
                v-model="xiangmu"
                :disabled="true" style="margin-bottom:20px;">
              </el-input>
               <el-select v-model="value" filterable multiple placeholder="请选择分配的人员" style="width:100%" @change="distribution" >
                <el-option
                  v-for="item in human"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-button @click="usersend" style="display:block;margin:20px auto;">确认分配</el-button>
            </el-dialog>
         
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
      human:[],
      users:[],
      fenpeiren:"",
      xiangmu:'',
       dialogVisible: false,
       value:'',
      form: {
        gid:"",
        account_id: "", //账户id
        campaign_id: "", //广告id
        type: "", //电商平台
      },
      typelist: [
        { type: 1, name: "京东" },
        { type: 2, name: "淘宝" },
        { type: 3, name: "拼多多" },
      ],
      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.reqmanagelist();
    this.$axios.get("/user/list").then((res)=>{
      this.human = res.data
    })
  },
  methods: {
    distribution(event){
      this.users = event.join(",");
    },
    usersend(){
      this.$axios.get("/neworder/share",{
          account_id:this.fenpeiren,
          user_id:this.users
      }).then((res)=>{
         this.dialogVisible = false
        if(res.code == 1){
            this.$axios.get("/neworder/account_id_find").then((res) => {
          if (res.code == 1) {
            const { data } = res.data;
            this.tableData = data;
          }
        });
        this.value = ""
        }
      })
    },
    handleEdit(index, row) {
    },
    handleDelete(index, row) {
    },
    // type值转化
    statusFormatter(row, column) {
      const type = row.type;
      if (type == 1) {
        return "京东";
      } else if (type == 2) {
        return "淘宝";
      } else if (type == 3) {
        return "拼多多";
      }
    },
    //请求列表
    reqmanagelist() {
      this.$axios.get("/neworder/account_id_find").then((res) => {
        if (res.code == 1) {
          const { data } = res.data;
          this.tableData = data;
        }
      });
    },
    //置空表格
    empty() {
      this.form = {
        account_id: "", //账户id
        campaign_id: "", //广告id
        gid:"",
        type: "", //电商平台
      };
    },
    //添加
    addmanage() {
      //弹窗出现
      this.dialogFormVisible = true;
    },
    fenpei(scope){
      this.dialogVisible = true
      this.xiangmu = scope.name
      this.fenpeiren = scope.id
    },
    //确定
    confirm() {
      this.dialogFormVisible = false;
      //接口传数据
      this.$axios.get("/neworder/account_id", this.form).then((res) => {
        if (res.code == 1) {
          //添加成功
          this.reqmanagelist();
        }
      });
      this.empty();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.empty();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.el-dialog {
  width: 35%;
}
</style>